<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>服务</title>
    <link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap3/css/dashboard.css">
    <script src="../lib/angularjs/angular.min.js"></script>
    <style>body{margin:10px 80px;}</style>
</head>
<body ng-app="app01">

<div class="panel panel-primary" ng-controller="ctrl01">
    <div class="panel-heading">Demo01</div>
    <div class="panel-body">
        <p><button class="btn btn-danger" ng-click="loading()">加载数据</button></p>
        <p class="alert alert-danger">{{message}}</p>
    </div>
    <div class="panel-footer">
        $http只接收一个参数，这个参数是个对象{method:'get',url:''}
    </div>
</div>

<div class="panel panel-primary" ng-controller="ctrl02">
    <div class="panel-heading">Demo02</div>
    <div class="panel-body">
        <p><button class="btn btn-danger" ng-click="loading()">加载数据</button></p>
        <p class="alert alert-danger">
            <b>data：</b>{{data}}<br/>
            <b>status：</b>{{status}}<br/>
            <b>statusText：</b>{{statusText}}<br/>
            <b>headers：</b>{{headers}}<br/>
            <b>config：</b>{{config }}</p>
    </div>
    <div class="panel-footer text-danger">
        <h2>AngularJS 1.6 开始移除$http success/erro 方法,用.then()和.catch()代替</h2>
        <p>get、header、delete、post、put、jsonp</p>
    </div>
</div>

<div class="panel panel-primary" ng-controller="ctrl03">
    <div class="panel-heading">method、url、params</div>
    <div class="panel-body">
        <p><button class="btn btn-danger" ng-click="loading()">加载数据</button></p>
        <p>{{message}}</p>
    </div>
    <div class="panel-footer text-danger">
        <p>method:指定请求方式。get、post、delete、header等</p>
        <p>url:指定请求地址</p>
        <p>params:指定请求参数</p>
    </div>
</div>
<div class="panel panel-primary" ng-controller="ctrl04">
    <div class="panel-heading">method、url、data、headers</div>
    <div class="panel-body">
        <p><button class="btn btn-danger" ng-click="loading()">加载数据</button></p>
        <p>{{message}}</p>
    </div>
    <div class="panel-footer text-danger">
        <p>method:指定请求方式。get、post、delete、header等</p>
        <p>url:指定请求地址</p>
        <p>data:通常在发送POST请求时使用，它还可以在POST请求里发送二进制数据（var blob = new Blob(['Hello World'], {type: 'text/plain'});）</p>
        <p>headers:一个列表，每一个元素都是一个函数，它会返回代表随请求发送的HTTP头。如果函数的返回值是null，对应的头不会被发送。</p>
    </div>
</div>
<div class="panel panel-primary" ng-controller="ctrl05">
    <div class="panel-heading">method、url、xsrfHeaderName、xsrfCookieName、transformRequest、cache</div>
    <div class="panel-body">
        <p><button class="btn btn-danger" ng-click="loading()">加载数据</button></p>
        <p>{{message}}</p>
    </div>
    <div class="panel-footer text-danger">
        <p>method:指定请求方式。get、post、delete、header等</p>
        <p>url:指定请求地址</p>
        <p>xsrfHeaderName:保存XSFR令牌的HTTP头的名称。</p>
        <p>xsrfCookieName:保存XSFR令牌的cookie的名称。</p>
        <p>transformRequest:发送前对参数格式化等操作（函数或函数数组）。</p>
        <p>transformResponse:接收响应后参数据格式化等操作（函数或函数数组）。</p>
        <p>cache:缓存（布儿或缓存对象）。</p>
    </div>
</div>
<div class="panel panel-primary" ng-controller="ctrl06">
    <div class="panel-heading">method、url、timeout</div>
    <div class="panel-body">
        <p><button class="btn btn-danger" ng-click="loading()">加载数据</button></p>
        <p>{{message}}</p>
    </div>
    <div class="panel-footer text-danger">
        <p>method:指定请求方式。get、post、delete、header等</p>
        <p>url:指定请求地址</p>
        <p>timeout:请求将会在推迟timeout指定的毫秒数后再发送（数值型或promise对象）。</p>
        <p>withCredentials:如果该属性被设置为true，那么XHR请求对象中会设置withCredentials标记。默认情况下， CORS请求不会发送 cookie，而 withCredentials标记会在请求中加入Access-Control-Allow-Credentials头，这样请求就会将目标域的cookie包含在请求中。（数值型或promise对象）。</p>
        <p>responseType：
            <ul>
                <li>responseType:""（字符串，默认）；</li>
                <li> "arraybuffer"（ArrayBuffer）；</li>
                <li> "blob"（blob对象）；</li>
                <li> "document"（HTTP文档）；</li>
                <li> "json"（从JSON对象解析而来的JSON字符串）；</li>
                <li> "text"（字符串）；</li>
                <li> "moz-blob"（Firefox的接收进度事件）；</li>
                <li> "moz-chunked-text"（文本流）；</li>
                <li> "moz-chunked-arraybuffer"（ArrayBuffer流）</li>
            </ul>
        </p>
    </div>
</div>
</body>
<script>
    var app=angular.module('app01',[]);
    app.factory('dataFormat', function(){
        return function(data,headersGetter){
            //return JSON.stringify(data);
            alert(data+"\n"+headersGetter);
            return data;
        }
    })
</script>
<script>
    app.controller('ctrl01',function ($scope,$timeout,$http) {
        $scope.message="信息未加载……";
        $scope.loading=function () {
            $scope.message="信息加载中……";
            $timeout(function () {
                $http.get('templeage-other.html').then(function (a) {
                    $scope.message=a;
                });
            },1500);
        }
    });
</script>
<script>
    app.controller('ctrl02',function ($scope,$timeout,$http) {
        $scope.data = "信息未加载……";$scope.status = "信息未加载……";$scope.statusText = "信息未加载……";$scope.headers = "信息未加载……";$scope.config = "信息未加载……";
        $scope.loading=function () {
            $scope.message="加载中……";
            $timeout(function () {
                $http.get("templeage-other.html").then(function onSuccess(response) {
                    set(response);
                }).catch(function onError(response) {
                    set(response);
                });
            },1500);
        }
        function set(response) {
            $scope.data = response.data;
            $scope.status = response.status;
            $scope.statusText = response.statusText;
            $scope.headers = response.headers;
            $scope.config = response.config;
        }
    });
</script>
<script>
    app.controller('ctrl03',function ($scope,$timeout,$http) {
        $scope.message="信息未加载……";
        $scope.loading=function () {
            $scope.message="信息加载中……";
            $timeout(function () {
                $http({
                    method:'get',
                    url:'templeage-other.html',
                    params: {'name': 'ari'}
                }).then(function (a) {
                    $scope.message=a;
                });
            },1500);
        }
    });
</script>
<script>
    app.controller('ctrl04',function ($scope,$timeout,$http) {
        $scope.message="信息未加载……";
        var blob = new Blob(['Hello World'], {type: 'text/plain'});
        var authToken='10238142039480sdfjwo203';
        $scope.loading=function () {
            $scope.message="信息加载中……";
            $timeout(function () {
                $http({
                    method:'post',
                    url:'templeage-other.html',
                    data:blob,
                    headers : {'Authorization' : authToken}
                }).then(function (a) {
                    $scope.message=a;
                });
            },1500);
        }
    });
</script>
<script>
    app.controller('ctrl05',function ($scope,$timeout,$http,dataFormat) {
        $scope.message="信息未加载……";
        var authToken='10238142039480sdfjwo203';
        $scope.loading=function () {
            $scope.message="信息加载中……";
            $timeout(function () {
                $http({
                    method:'get',
                    url:'templeage-other.html',
                    data:'{name:123}',
                    xsrfHeaderName:authToken,
                    xsrfCookieName:authToken,
                    transformRequest:dataFormat,
                    transformResponse:dataFormat,
                    cache:true
                }).then(function (a) {
                    $scope.message=a;
                });
            },1500);
        }
    });
</script>
<script>
    app.controller('ctrl06',function ($scope,$http) {
        $scope.message="信息未加载……";
        $scope.loading=function () {
            $scope.message="信息加载中……";
            $http({
                method:'get',
                url:'templeage-other.html',
                timeout:1000000,
                withCredentials:true,
                responseType:"text"
            }).then(function (a) {
                $scope.message=a;
            });
        }
    });
</script>
</html>